<template>
  <div class="alipay-page">
    <h2>请使用支付宝扫码支付</h2>

    <!-- 二维码展示区域 -->
    <div class="qr-code-container" v-if="qrCodeDataUrl">
      <img :src="qrCodeDataUrl" alt="支付宝支付二维码" />
    </div>
    <p v-else>生成二维码中...</p>

    <!-- 提示信息 -->
    <p class="tips">支付完成后将自动返回课程页面</p>
    <p class="error" v-if="errorMsg">{{ errorMsg }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import QRCode from 'qrcode'; // 用于将二维码链接转为图片
import { useRouter, useRoute } from 'vue-router';
import {queryStatus} from "@/api/Payment.js";
// 路由相关
const router = useRouter();
const route = useRoute();

// 从路由参数获取数据
const qrCodeUrl = ref(route.query.qrCodeUrl);//支付宝返回的二维码链接
const orderNumber = ref(route.query.orderNumber);   // 订单号
const courseId = ref(route.query.courseId);         // 课程ID（支付后跳转用）

// 响应式数据
const qrCodeDataUrl = ref(''); // 转换后的二维码图片（base64格式）
const errorMsg = ref('');      // 错误提示
let pollTimer = null;          // 轮询定时器

/**
 * 将支付宝返回的二维码链接转为图片
 */
const generateQrCode = async () => {
  try {
    console.log(qrCodeUrl.value)
    // 将二维码链接转为base64图片（前端直接展示）
    qrCodeDataUrl.value = await QRCode.toDataURL(qrCodeUrl.value);
  } catch (error) {
    errorMsg.value = '二维码生成失败，请刷新页面重试';
    console.error('二维码生成失败：', error);
  }
};

/**
 * 轮询查询支付状态（每3秒一次）
 */
const startPolling = () => {
  // 清除之前的定时器（防止重复）
  if (pollTimer) clearInterval(pollTimer);

  pollTimer = setInterval( () => {
    try {
      // 调用后端接口查询支付状态
      queryStatus({ orderNumber: orderNumber.value }).then(res=>{
        console.log("--------支付------------")
        console.log(res)
        // 如果支付成功，跳转回课程页面
        if (res) {
          clearInterval(pollTimer); // 清除定时器
          router.push(`/course/detail/${courseId.value}`); // 跳回课程详情页
        }
      })
    } catch (error) {
      errorMsg.value = '查询支付状态失败，正在重试...';
      console.error('查询支付状态失败：', error);
    }
  }, 3000); // 3秒查询一次
};

/**
 * 页面加载时执行
 */
onMounted(() => {
  generateQrCode(); // 生成二维码
  startPolling();   // 开始轮询
});

/**
 * 页面关闭时清除定时器（防止内存泄漏）
 */
onUnmounted(() => {
  if (pollTimer) clearInterval(pollTimer);
});
</script>

<style scoped>
.alipay-page {
  text-align: center;
  padding: 30px;
}
.qr-code-container {
  margin: 20px auto;
  width: 250px;
  height: 250px;
  padding: 10px;
  border: 1px solid #eee;
}
.qr-code-container img {
  width: 100%;
  height: 100%;
}
.tips {
  color: #666;
  margin-top: 20px;
}
.error {
  color: #ff4d4f;
  margin-top: 10px;
}
</style>